<template>
  <view class="home">
    <up-overlay :show="show" @click="handleClose">
      <view class="sign-box" @click.stop="">
        <image src="@/static/images/02_3ghsdf.png" mode=""></image>
        <u-text margin=" 0 0 10rpx 0" :text="`已经连续打卡${data.signInfo.successions}天`" bold align="center" color="#E47117"
          size="16"></u-text>
        <u-row gutter="7">
          <u-col :span="item.span|| 3" v-for="(item,index) in data.list" :key="index">
            <view class="sign-item">
              <image :src="item.image" :style="{width:`${item.width||134}` +'rpx',height:`${item.height || 152}`+'rpx'}"
                class="sign-bg">
              </image>
              <image src="@/static/images/02_3wd.png" v-if="data.signInfo.successions >= item.day" class="sign-icon">
              </image>
              <view>{{item.name}}</view>
              <view class="u-m-t-15">第{{item.day}}天</view>
            </view>
          </u-col>
        </u-row>
        <view class="sign-btn" @click="_dosign">
          {{data.signInfo.checked?'已打卡':'立即打卡'}}
        </view>
      </view>

    </up-overlay>
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { clockinInfo, dosign } from '../../config/api';
  const emit = defineEmits(["update:show","successConfirm"])
  const props = defineProps({
    show: {
      type: Boolean,
      default: false
    }
  })
  const data = ref({
    list: [{
      image: "/static/images/02_3fr.png",
      name: '积分+1',
      day: 1
    }, {
      image: "/static/images/02_3fr.png",
      name: '积分+1',
      day: 2
    }, {
      image: "/static/images/02_3fr.png",
      name: '积分+1',
      day: 3
    }, {
      image: "/static/images/02_3fr.png",
      name: '积分+1',
      day: 4
    }, {
      image: "/static/images/02_3fr.png",
      name: '积分+1',
      day: 5
    }, {
      image: "/static/images/02_3fr.png",
      name: '积分+1',
      day: 6
    }, {
      image: "/static/images/02_3mh.png",
      width: '284',
      height: '152',
      name: '积分+1',
      day: 7,
      span: '6'
    }],
    signInfo: {}
  })
  onMounted(async () => {
    let result = await _clockinInfo()
    if (!uni.$u.test.isEmpty(result)) initDate()
  })
  const initDate = () => {
    let successions = data.value.signInfo.successions
    if (successions < 7) return
    let multiple = successions % 7 != 0 ? parseInt(successions / 7) : successions % 7 + 1
    data.value.list = data.value.list.map(item => {
      item.day = item.day + multiple * 7
      return item
    })
  }
  // 打卡信息
  const _clockinInfo = () => {
    return new Promise((reslove, reject) => {
      clockinInfo().then(res => {
        data.value.signInfo = res.data
        reslove(res.data)
      })
    })
  }
  const _dosign = () => {
    if (data.value.signInfo.checked) return
    dosign().then(res => {
      console.log(res)
      uni.$u.toast(res.msg)
      data.value.signInfo.checked = true
      data.value.signInfo.successions++
      emit('successConfirm')
    })
  }
  const handleClose = () => {
    emit("update:show", false)
  }
</script>

<style lang="scss" scoped>
  .sign-box {
    width: 652rpx;
    height: 796rpx;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
    padding: 0 34rpx;
    padding-top: 125rpx;

    >image {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }

    ::v-deep .u-row {
      flex-wrap: wrap;
    }

    .sign-item {
      position: relative;
      z-index: 1;
      padding-top: 118rpx;
      font-size: 20rpx;
      font-weight: 500;
      color: #fff;
      text-align: center;
      margin: 28rpx auto 0;

      view+view {
        color: #6C715D;
        font-size: 24rpx;
      }

      .sign-bg {
        top: 0;
        right: 0;
        left: 0;
        margin: auto;
        position: absolute;
        z-index: -1;
      }

      .sign-icon {
        top: 0;
        left: 0;
        position: absolute;
        width: 40rpx;
        height: 34rpx;
      }
    }

    .sign-btn {
      width: 446rpx;
      height: 86rpx;
      background: #F87610;
      border-radius: 46rpx;
      text-align: center;
      line-height: 86rpx;
      color: #fff;
      font-size: 30rpx;
      margin: 40rpx auto;
    }
  }
</style>